/**
 * @作者：耿
 * 
 */

import React, { Component } from 'react'
import { observable, autorun } from 'mobx';
import store from '../../store'
import { inject, observer } from 'mobx-react';
import './index.css'

@observer
class Cart extends Component {
  state = {
    users: []
  }
  componentDidMount() {
    let _this = this;

  }

  delCart = (product) => {
    store.delCart(product)
  }

  render() {
    return (
      <div>
        <h3>Cart （{store.totalNum}）</h3>
        <ul>
          {store.cartProd.map((item, index) => {
            return (
              <li key={index} className='li_box'>
                <span>{item.name} </span>
                <span>{item.price} 元</span>
                <span onClick={() => this.delCart(item)}>删除 -</span>
              </li>
            )
          })}
        </ul>
        <h3 style={{ color: 'red' }}>总计价格 {store.totalPrice} 元</h3>
      </div>

    )
  }
}


export default Cart
